<template>
<!--快捷导航模块-->
<div class="shortcut">
  <div class="w">
    <div class="fl">
      <ul>
        <li>品优购欢迎您！&nbsp</li>
        <li><a href="#">请登录&nbsp</a><a class="style_red" href="#">免费注册</a></li>
      </ul>
    </div>
    <div class="fr">
      <ul>
         <li><a href="#" class="arrow-icon">网站导航&nbsp</a></li>
         <li><a href="#" class="arrow-icon">客户服务&nbsp</a></li>
         <li><a href="#" class="arrow-icon">关注品优购&nbsp</a></li>
         <li><a href="#">企业采购</a></li>
         <li><a href="#">品优购会员</a></li>
         <li><a href="#" class="arrow-icon">我的品优购&nbsp</a></li>
         <li><a href="#">我的订单</a></li>
      </ul>
    </div>
  </div>

</div>
</template>

<script setup>

</script>

<style scoped lang="scss">
//引入公共样式文件
.shortcut{
    height: 31px;
    line-height: 31px;
    background-color:#f1f1f1 ;
  .w{
     .fl{
    float: left;
       ul{
         li{
           float: left;
         }
       }
  }
  .fr{
    float: right;
    ul{
      li{
        float: right;
        height: 12px;
        line-height: 12px;
        justify-content: center;
        margin-top: 10px;
        border-right: 1px solid #666666;
        padding: 0 10px;
      }
      li:first-child{
        border-right: none;
      }
      .arrow-icon::after{
        content: '∨';
      }
      }
    }
  }

  }
</style>
